<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="lz">
    <script src="jQuery/jquery-3.1.1.js"></script>
    <title></title>
    <style>
        main{
            margin: 0 auto;
            width: 192px;
            border: 1px solid #cccccc;
        }
        .head{
            width: 100%;
            background-color: #e9e5e3;
            height: 30px;
            font-size: 1.3rem;
            text-align: center;
            line-height: 30px;
        }
        ul,li{
            margin: 0;
            padding: 0;
        }
        li{
            width: 182px;
            height: 150px;
            /*background-color: sandybrown;*/
            list-style: none;
            margin: 5px 5px;
            position: relative;
            overflow: hidden;
        }
        img{
            width: 100%;
        }
        .l1>img:nth-child(1),.l2>img:nth-child(1),.l3>img:nth-child(1){
            position: absolute;
        }

        .l1>img:nth-child(2),.l2>img:nth-child(2),.l3>img:nth-child(2){
            position: absolute;
            right: -182px;
            top: 0;
        }
        li>div{
            width: 100%;
            height: 20px;
            color: white;
            text-align: center;
            background-color: #d96160;
            line-height: 20px;
        }
        li>div:nth-of-type(1){
            position: absolute;
            bottom: 0;
        }       
        li>div:nth-of-type(2){
            position: absolute;            
            bottom: -20px;
        }        
        .l2>div{
            background-color: #134752;
        } 
        .l3>div{
            background-color: #2271af;
        }        
    </style>
</head>
<body>
    <main class="main">
        <div class="head">专辑推荐</div>
        <ul class="ul">
            <li class="l1">
                <img src="images/1_1.jpg" alt="">
                <img src="images/1_2.jpg" alt="">
                <div>爱仕达爱仕</div>
                <div>COCOON/可可妮</div>
            </li>
            <li class="l2">
                <img src="images/2_1.jpg" alt="">
                <img src="images/2_2.jpg" alt="">
                <div>爱仕达爱仕</div>
                <div>COCOON/可可妮</div>
            </li>
            <li class="l3">
                <img src="images/3_1.jpg" alt="">
                <img src="images/3_2.jpg" alt="">
                <div>爱仕达爱仕</div>
                <div>COCOON/可可妮</div>
            </li>
        </ul>
    </main>
</body>
</html>
<script>
    $('li').each(function(index){
        $(this).hover(function(){
            $(this).find('img:nth-child(1)').stop().animate({
                left:-182,
            },500)
            $(this).find('img:nth-child(2)').stop().animate({
                left:0,
            },500)
             $(this).find('div:nth-of-type(1)').stop().animate({
                bottom:-20,
            },500)
            $(this).find('div:nth-of-type(2)').stop().animate({
                bottom:0,
            },500)
        },function(){
            $(this).find('img:nth-child(1)').stop().animate({
                left:0,
            },500)
            $(this).find('img:nth-child(2)').stop().animate({
                left:182,
            },500)
             $(this).find('div:nth-of-type(1)').stop().animate({
                bottom:0,
            },500)
            $(this).find('div:nth-of-type(2)').stop().animate({
                bottom:-20,
            },500)
        })
    })
</script>